<template name="mugen_form">
    <form id="mugenGenerator_form" class="form-horizontal">
        <p class="text-info">Fields with * are required.</p>
        <div class="form-group">
            <label for="collection" class="col-sm-3 control-label" style="text-align: left;">Collection Name (your mongo table/collection name) *</label>
            <div class="col-sm-5">
                <input type="text" id="collection" value="" placeholder="eg: comments | heroSkills" class="form-control" autofocus="true">
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Name *</th>
                    <th>Type *</th>
                    <th>Required</th>
                    <th>Label</th>
                    <th>Belongs to Collection</th>
                    <th>Relation Key</th>
                    <th></th>
                </tr>
            </thead>
            <tbody  class="collectionFields">
                <tr>
                    <td><input type="text" class="names form-control" placeholder="eg: title"></td>
                    <td><select class="types form-control" id="types">                     
                            <option value="String" selected="selected">String</option>                    
                            <option value="Number">Number</option>                    
                            <option value="Boolean">Boolean</option>                    
                            <option value="Date">Date</option>                    
                        </select></td>
                    <td><input type="checkbox" class="isRequireds" value="1"></td>
                    <td><input type="text" class="labels form-control" value="" placeholder="eg: Title"></td>
                    <td><input type="text" class="belongToCollections form-control" value="" placeholder="eg: Posts (case sensitive)"></td>
                    <td><input type="text" class="relationKeys form-control" value="" placeholder="eg: post"></td>
                    <td>
                        <a href="#" class="btn btn-default btnAddField">Add</a>
                        <a href="#" class="btn btn-default btnDeleteField">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <hr/>

        <table class="table table-bordered">
            <thead>
                <tr>                    
                    <th>Code File</th>
                    <th style="width: 30px;"><input type="checkbox" id="checkAll" checked=""/></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><div id="generatedRoutersPath">client/routers/</div></td>
                    <td><input type="checkbox" class="checkAll" value="routers" checked=""/></td>
                </tr>
                <tr>
                    <td><div id="generatedViewsPath">client/views/</div></td>
                    <td><input type="checkbox" class="checkAll" value="views" checked=""/></td>
                </tr>
                <tr>
                    <td><div id="generatedCollectionsPath">lib/collections/</div></td>
                    <td><input type="checkbox" class="checkAll" value="collections" checked=""/></td>
                </tr>
                <tr>
                    <td><div id="generatedControllersPath">lib/controllers/</div></td>
                    <td><input type="checkbox" class="checkAll" value="controllers" checked=""/></td>
                </tr>
                <tr>
                    <td><div id="generatedServerPath">server/</div></td>
                    <td><input type="checkbox" class="checkAll" value="server" checked=""/></td>
                </tr>
            </tbody>
        </table>

        <div>
            <div class="buttons">
                <!--<a href="#" id="btnAddField" class="btn btn-success">Add Field</a>-->
                <button id="btnSave" type="submit" class="btn btn-primary">Generate</button>        
            </div>
        </div>
    </form>
</template>

